﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Change Vertical Axis To Logarithmic Scale</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Change Vertical Axis To Logarithmic Scale"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n394","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="Plotting data with large differences in values often leads to incorrect data analysis and may even fail to showcase a completely readable chart. SpreadJS allows users to customize the minimum and the maximum scale values of the vertical axis (also ca" /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="9588a5fc-f0da-4096-b501-7f220908e9ef"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="bdba97c4-037f-4cd7-ae56-830374286ef0"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="8"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="ManagingDataVisualizationAndObjects.html">Manage Data Visualization and Objects</a>
 / <a href="Charts.html">Charts</a>
 / Change Vertical Axis To Logarithmic Scale</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Change Vertical Axis To Logarithmic Scale<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>Plotting data with large differences in values&nbsp;often leads to incorrect data analysis and may even fail to showcase a completely readable chart.&nbsp;SpreadJS allows users to customize the minimum and the maximum scale values of the vertical axis (also called value axis). Using this feature, users can change the value axis to logarithmic scale&nbsp;in order to&nbsp;meet their specific analytical requirements while formatting charts.</p>

<h3 id="a">Usage Scenario</h3>

<p>This feature is useful in the following scenarios:</p>

<ul>
    <li>When the values plotted in a chart cover a huge data range, it's a good idea to change value axis to logarithmic scale.</li>

    <li>When business analysts need to carry out an in-depth comparison of sales revenues between different companies.</li>

    <li>When users are trying to visualize comprehensive data sets (like economic, demographic or marketing data sets).</li>

    <li>When users want to compare the relative change (not the absolute change) in data series values.</li>

    <li>When users want to quickly analyse the variances between significantly different sets of data.</li>
</ul>

<p><strong>Example</strong> - Let's say you want to compare sales revenues of different product-based companies A and B, where A refers to a large company that is growing substantially but slowly and B refers to a small company that is growing quickly.</p>

<p>Now, if the sales revenues of both the companies are depicted in the same line chart, it will just compare the absolute data values and the readability of the chart will decrease to a great extent. Further, it will be difficult to rule out that the smaller firm (B) is growing comparatively faster than the larger one (A). In such a sceanrio, using log scales helps&nbsp;business analysts to constantly track the sales of competitors in an easy and effective way.</p>

<p><img style="MAX-WIDTH: 100%; HEIGHT: auto" border="0" alt="" src="images/spreadjsv13images/log-axes.png" /></p>

<h3 id="b">LogBase and Scaling Rules</h3>

<p>The&nbsp;<strong>scaling</strong> property of the <strong>IAxis</strong> interface allows users to get or set the axes of the chart. The LogBase can be configured to various options - "Null", "10" and "2". While changing the vertical axis to logarithmic axes, the following rules must be kept in mind:</p>

<ul>
    <li>Users can set the log scale for only the vertical axis (value axis).</li>

    <li>The axes labels number grows according to the given base power. For example- if log base is 3, the numbers are 1, 3, 9, 27, 81...</li>

    <li>Minimum base is 2</li>

    <li>LogBase value must lie between 2-1000.</li>

    <li>If minimum bound is set to auto, the minimum value is 1.</li>
</ul>

<p>The following table lists the different log base options that can be used while changing the vertical axis to log scale.</p>

<table>
    <tbody>
        <tr>
            <td width="56"><strong>LogBase</strong></td>

            <td width="356"><strong>Description</strong></td>
        </tr>

        <tr>
            <td width="56">Null</td>

            <td width="356">This option is used to disable the log scale.</td>
        </tr>

        <tr>
            <td width="56">10</td>

            <td width="356">This option is used to customize the log scale with 10 base.</td>
        </tr>

        <tr>
            <td width="56">2</td>

            <td width="356">This option is used to customize the log scale with 2 base.</td>
        </tr>
    </tbody>
</table>

<h3 id="c">Supported Chart Types</h3>

<p>All chart types containing at least one value axis support logarithmic scaling except Histogram charts, Box &amp; Whisker charts, and Waterfall charts.</p>

<div class="i-box i-box-note">
    <p><strong>Note:</strong> <span style="COLOR: rgb(0,0,0)">The following limitation must be kept in mind while working with log scales in charts:</span></p>

    <ul>
        <li><span style="COLOR: rgb(0,0,0)">If a user enables the log scaled x axis in a scatter or bubble chart, and then changes the chart type to any other chart type containing a category axis (x-axis); then the chart will display a strange view and the "Add Chart Element Axes" state may not work as expected.</span></li>
    </ul>
</div>

<h3 id="d">Using Code</h3>

<p>This example code depicts a relative comparison of sales revenues of two different companies using logarithmic scaling in the chart.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">
                    <p>var activeSheet = spread.getActiveSheet();<br />
                    activeSheet.suspendPaint();</p>

                    <p>// Prepare data for chart<br />
                    activeSheet.setValue(0, 1, "Y-2015");<br />
                    activeSheet.setValue(0, 2, "Y-2016");<br />
                    activeSheet.setValue(0, 3, "Y-2017");<br />
                    activeSheet.setValue(0, 4, "Y-2018");<br />
                    activeSheet.setValue(0, 5, "Y-2019");<br />
                    activeSheet.setValue(1, 0, "Gradlco Corp. Ltd");<br />
                    activeSheet.setValue(2, 0, "Saagiate Corp. Ltd.");<br />
                    activeSheet.setColumnWidth(0, 120);<br />
                    for (var r = 1; r &lt;= 2; r++)</p>

                    <p>{<br />
                    &nbsp;&nbsp;&nbsp;for (var c = 1; c &lt;= 5; c++) {<br />
                    &nbsp;&nbsp;&nbsp;activeSheet.setValue(r, c, parseInt(Math.random() * 5000));<br />
                    }<br />
                    }<br />
                    // Add columnClustered chart<br />
                    chart_columnClustered = activeSheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 100, 600, 400);</p>

                    <p>var series = chart_columnClustered.series();<br />
                    series.add({<br />
                    chartType: GC.Spread.Sheets.Charts.ChartType.columnClustered,<br />
                    axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,<br />
                    name: "Sheet1!$A$2",<br />
                    xValues: "Sheet1!$B$1:$F$1",<br />
                    yValues: "Sheet1!$B$2:$D$2"<br />
                    });<br />
                    series.add({<br />
                    chartType: GC.Spread.Sheets.Charts.ChartType.lineMarkers,<br />
                    axisGroup: GC.Spread.Sheets.Charts.AxisGroup.secondary,<br />
                    name: "Sheet1!$A$3",<br />
                    xValues: "Sheet1!$B$1:$F$1",<br />
                    yValues: "Sheet1!$B$3:$D$3"<br />
                    });</p>

                    <p>var axes = chart_columnClustered.axes();</p>

                    <p>axes.primaryCategory.style.color = 'green';<br />
                    axes.primaryCategory.title.color = 'green';<br />
                    axes.primaryCategory.title.text = 'Primary Category Axes';</p>

                    <p>axes.primaryValue.style.color = 'red';<br />
                    axes.primaryValue.title.color = 'red';<br />
                    axes.primaryValue.title.text = 'Primary Value Axes with Logarithmic Scaling';<br />
                    axes.primaryValue.title.fontSize = 16;<br />
                    axes.primaryValue.scaling = {<br />
                    logBase: 20<br />
                    };<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
                    axes.secondaryCategory.visible = true;<br />
                    axes.secondaryCategory.style.color = 'green';<br />
                    axes.secondaryCategory.title.color = 'green';<br />
                    axes.secondaryCategory.title.text = 'Secondary Category Axes';<br />
                    axes.secondaryCategory.title.fontSize = 16;</p>

                    <p>axes.secondaryValue.style.color = 'blue';<br />
                    axes.secondaryValue.title.color = 'blue';<br />
                    axes.secondaryValue.format = 'General';<br />
                    axes.secondaryValue.title.text = 'Secondary Value Axes';</p>

                    <p>chart_columnClustered.axes(axes);</p>

                    <p>// Configure Chart Title<br />
                    var title = chart_columnClustered.title();<br />
                    title.text = "Annual Sales Record";<br />
                    title.fontFamily = "Cambria";<br />
                    title.fontSize = 28;<br />
                    title.color = "Red";<br />
                    chart_columnClustered.title(title);<br />
                    activeSheet.resumePaint();</p>
                </td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
